<template>
  <a-card class="createForm" :bordered="false">
    <div class="table-page-search-wrapper" v-if="createFormBox">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="5" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.code" placeholder="请输入用户编号" />
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.phone" placeholder="请输入账号" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <s-table
        class="table_style"
        ref="table"
        size="default"
        rowKey="key"
        :columns="UserListTable"
        :data="loadData">
        <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
        <span slot="action" slot-scope="text,record,index" class="operation_button_box">
          <template>
            <button class="button_pct operation_button_release" v-if="operationPermission['detail']" @click="UserListInfoEvent(record)">详情</button>
            <!-- <button class="button_pct operation_button_details" @click="handleDetail(record)">详情</button> -->
            <button class="button_pct operation_button_edit" v-if="operationPermission['setting']" @click="UserListSetEvent(record)">设置</button>
          </template>
        </span>
      </s-table>
    </div>

    <a-modal
      width="60%"
      title="用户详情"
      class="UserListInfoBox"
      :visible="UserListInfoBox"
      :footer="null"
      @cancel="UserListInfoClose">
      <div class="UserListInfoBoxs">
        <h3>个人信息</h3>
        <div>
          <div class="UserListInfoBox_row">
            <a-row :gutter="24">
              <a-col :span="6" class="UserListInfoBox_row_col">
                <span class="UserListInfoBox_row_col_title">个人账号：</span>
                <span class="UserListInfoBox_row_col_text">{{ userDetailData.phone }}</span>
              </a-col>
              <a-col :span="6" class="UserListInfoBox_row_col">
                <span class="UserListInfoBox_row_col_title">个人编号：</span>
                <span class="UserListInfoBox_row_col_text">{{ userDetailData.userCode }}</span>
              </a-col>
              <a-col :span="6" class="UserListInfoBox_row_col">
                <span class="UserListInfoBox_row_col_title">名称：</span>
                <span class="UserListInfoBox_row_col_text">{{ userDetailData.userName }}</span>
              </a-col>
            </a-row>

          </div>
          <div>
            <h3>试验记录</h3>
            <a-table :columns="createForm4CountTable" :dataSource="userDetailData.userExperimentVOList" size="middle" :pagination="false" class="createForm1Table_box">
              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <template slot="name" slot-scope="text,record,index">
                <a href="javascript:;">{{ text }}</a>
              </template>
              <span slot="action" slot-scope="record" class="operation_button_box">
                <template>
                  <button class="button_pct operation_button_edit" @click="handleSub(record)" ghost>导出数据</button>
                </template>
              </span>
            </a-table>
          </div>
        </div>
        <div class="UserListInfoBox_cancel_box">
          <button class="button_pct UserListInfoBox_cancel" @click="UserListInfoClose">关闭</button>
        </div>
      </div>
    </a-modal>
    <a-modal
      width="60%"
      title="设置"
      class="UserListSetBox"
      :visible="UserListSetBox"
      :footer="null"
      @ok="UserListSetBoxOk"
      @cancel="UserListSetBox=false">
      <a-form id="formSet" class="UserListSetBox_tab" ref="formSet" :form="form" @submit="handleSubmit">
        <!-- textAlign: 'center', -->
        <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ borderBottom: 'unset' }" @change="handleTabClick">
          <a-tab-pane key="tabs1" tab="添加受试者">
            <h3>添加受试者进入试验</h3>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item>
                  <p class="UserListSetBox_tab_title">试验名称</p>
                  <a-select placeholder="请选择试验" style="width: 100%" v-decorator="['experimentId',{rules: [{ required: true, message: '请选择试验名称' }], validateTrigger: 'change'} ]">
                    <a-select-option v-for="item in userSetListOfList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item>
                  <p class="UserListSetBox_tab_title">开始时间 </p>
                  <a-date-picker style="width: 100%" v-decorator="[ 'startDate', {rules: [{ required: true, message: '请选择开始时间' }]}]" format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="tabs2" tab="试验品发放">

            <h3>当前试验品发放情况
              <a-tooltip placement="top">
                <template slot="title">
                  <span>仅显示当前受试者正在参加的，并且受试者状态为进行中的试验。</span>
                </template>
                <a-icon type="exclamation" :style="{ fontSize: '16px', color: '#fff',fontWeight: '700', borderRadius: '50%',marginLeft: '5px',background: 'rgba(191,191,191,1)'}" />
              </a-tooltip>
            </h3>

            <a-table :columns="UserListInTestTable" :dataSource="UserSetTestData" size="middle" :pagination="false" class="createForm1Table_box">
              <span slot="serial" slot-scope="text,record,index">{{ index + 10 }}</span>
              <template slot="experimentSchedule" slot-scope="text,record,index">
                <a-progress v-if="text.experimentSchedule===1" :percent="100" />
                <a-progress v-else :percent="Number((text.experimentSchedule*100).toFixed(1))" status="active" />
              </template>
            </a-table>

            <a-form-item>
              <h3 class="createForm1_h3">下一阶段试验品发放计划</h3>
              <a-row :gutter="24">
                <a-col :span="24">
                  <p class="UserListSetBox_tab_title">试验名称</p>
                  <a-select placeholder="请选择试验" style="width: 100%" v-decorator="['testExperimentId', {rules: [{ required: true, message: '请选择试验' }], validateTrigger: 'change'}]">
                    <a-select-option v-for="item in userSetListOfList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>

            <a-form-item>
              <p class="UserListSetBox_tab_title">受试者耗尽试验品的周期</p>
              <a-input style="width: 100px; margin-right:10px;" placeholder="周期数" v-decorator="['periodNum', {rules: [{ required: true, message: '请输入周期数' }], validateTrigger: 'blur'}]" />
              <a-select placeholder="请选择周期类型" style="width: 144px" v-decorator="['period', {rules: [{ required: true, message: '请输入周期类型' }], validateTrigger: 'blur'}]">
                <a-select-option value="1">天</a-select-option>
                <a-select-option value="2">周 </a-select-option>
                <a-select-option value="3">月</a-select-option>
                <a-select-option value="4">年</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <p class="UserListSetBox_tab_title">应用程序中试验品发放提示标题</p>
              <a-input style="width: 100%;" v-decorator="['tipTitle', {rules: [{ required: true, message: '请输入试验品发放提示标题' }], validateTrigger: 'blur'}]" placeholder="请尽快领取下一阶段药品" />
            </a-form-item>

            <a-form-item>
              <p class="UserListSetBox_tab_title">应用程序中试验品发放提示内容</p>
              <a-input style="width: 100%;" v-decorator="['tipContent', {rules: [{ required: true, message: '请输入试验品发放提示内容' }], validateTrigger: 'blur'}]" placeholder="如您有任何疑问，请咨询您的医师" />
            </a-form-item>
          </a-tab-pane>
        </a-tabs>

        <a-form-item style="text-align: right;">
          <a-button style="width:72px;margin-right: 20px;" class="login-button" @click="UserListSetBox=false">取消</a-button>
          <a-button
            style="win-width:72px"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="loginBtn"
            :disabled="loginBtn"
            v-text="customActiveKey==='tabs1'?'下一步':'确定'"
            ></a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
// import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getServiceList, getUserDetail, getUserSetListOf, getUserSave, getUserTestSave, getUserTestList } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis
  },
  data () {
    return {
      operationPermission:{},
      form: this.$form.createForm(this),
      customActiveKey: 'tabs1',
      loginBtn: false,
      UserListInfoBox: false,
      UserListSetBox: false,
      createFormBox: true,
      setUserId: '',
      userDetailData: {},
      userSetListOfList: [],
      // 查询参数
      queryParam: {},
      designArray: {
        '0': '预发布',
        '1': '进行中',
        '2': '暂停中',
        '3': '已结束'
      },
      UserListTable: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          align: 'center',
          width: '100px'
        },
        {
          title: '用户编号',
          dataIndex: 'code',
          // scopedSlots: { customRender: 'serial' },
          align: 'center'
        },
        {
          title: '账号',
          dataIndex: 'phone',
          align: 'center',
          width: '200px'
        },
        {
          title: '用户姓名',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '200px',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],

      createForm4CountTable: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          align: 'center',
          width: '100px'
        },
        {
          title: '试验名称',
          dataIndex: 'experimentName',
          align: 'center'
        },
        {
          title: '试验类别',
          dataIndex: 'experimentTypeName',
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'statusName',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '20%',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      UserListInTestTable: [
        {
          title: '试验名称',
          dataIndex: 'experimentName',
          align: 'center'
        },
        {
          title: '试验周期',
          dataIndex: 'grantPeriod',
          align: 'center'
        },
        {
          title: '试验进度',
          scopedSlots: { customRender: 'experimentSchedule' },
          // dataIndex: 'age',
          align: 'center'
        }
      ],
      // 表格4 计数数据
      UserSetTestData: [],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getServiceList(Object.assign(parameter, this.queryParam)).then(res => {
          if (res.code === 200) {
            res.data.data = res.data.list
            this.$message.success('用户列表获取' + res.message)
            return res.data
          } else {
            this.$message.error('用户列表获取' + res.message)
            return []
          }
        })
      }

    }
  },
  filters: {},
  created () {
    let list = JSON.parse(localStorage.getItem("operationPermission"))
    list.forEach(element => {
      if (element.permissionId == 'userList') { 
        element.actionVOS.forEach(i => {
          this.operationPermission[i.action] = i.defaultCheck
        });
      }      
    });
   },
  methods: {
    UserListInfoClose () {
      this.UserListInfoBox = false
    },
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        // loginBtn,
        customActiveKey
        // Login
      } = this

      this.loginBtn = true
      const validateFieldsKey = customActiveKey === 'tabs1' ? ['experimentId', 'startDate'] : ['testExperimentId', 'periodNum', 'period', 'tipTitle', 'tipContent']
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          if (customActiveKey === 'tabs1') {
            values.userId = this.setUserId
            values.startDate = values['startDate'].format('YYYY-MM-DD')
            getUserSave(values).then(res => {
              if (res.code === 200) {
                this.$message.success(res.message)
                this.customActiveKey= 'tabs2'
              } else {
                this.$message.error(res.message)
              }
              this.loginBtn = false
              // validateFields.form.resetFields()
            })
          } else {
            values.userId = this.setUserId
            values.experimentId = values.testExperimentId
            delete values.testExperimentId
            getUserTestSave(values).then(res => {
              if (res.code === 200) {
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
              this.loginBtn = false
              setTimeout(() => {
                this.UserListSetBox = false
              }, 100)
            })
          }
              this.form.resetFields()
        } else {
          setTimeout(() => {
            this.loginBtn = false
          }, 600)
        }
      })
    },
    handleTabClick (key) {
      this.customActiveKey = key
    },
    getUserSetListOfQuery () {
      getUserSetListOf({'userId':this.setUserId}).then(res => {
        if (res.code === 200) {
          this.userSetListOfList = res.data
        } else {
          this.$message.error('试验名称' + res.message)
          this.userSetListOfList = {}
        }
        this.userSetListOfList = res.data
      })
    },
    UserListSetEvent (record) {
       this.customActiveKey= 'tabs1'
      this.setUserId = record.id
      this.getUserSetListOfQuery()
      getUserTestList({ 'userId': record.id }).then(res => {
        if (res.code === 200) {
          this.UserSetTestData = res.data
        } else {
          this.$message.error('试验品列表' + res.message)
          this.UserSetTestData = {}
        }
      })
      this.UserListSetBox = true
    },
    UserListSetBoxOk () {
    },
    UserListInfoEvent (record) {
      this.userDetailData = {}
      getUserDetail({ 'id': record.id }).then(res => {
        if (res.code === 200) {
          this.userDetailData = res.data
        } else {
          this.$message.error('用户信息' + res.message)
          this.userDetailData = {}
        }
      })
      this.UserListInfoBox = true
    },
    handleSub (record) {
    }
  },
  watch: {
    queryParam: {
      handler (newValue, oldValue) {
        this.$refs.table.refresh(true)
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.ant-popover-title {
  width: 98px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}

.UserListInfoBox {
  padding: 0 23px;
  .ant-modal-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFangSC-Regular, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
  .UserListInfoBox_row {
    margin-top: 15px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px #e8e8e8 solid;
  }
}
.UserListSetBox {
  .ant-modal-title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFangSC-Regular, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
  }
}

.ant-popover-inner-content {
  padding: 5px 10px;
}
.operation_button_box {
  padding: 0px;
}

  .operation_button_details {
    background: rgba(86, 206, 209, 1);
    box-shadow: 0px 2px 4px 0px rgba(107, 203, 206, 0.68);
  }
.operation_button_release {
  background: rgba(86, 206, 209, 1);
  box-shadow: 0px 2px 4px 0px rgba(245, 215, 180, 1);
}
.operation_button_edit {
  background: rgba(248, 147, 31, 1);
  box-shadow: 0px 2px 4px 0px rgba(245, 215, 180, 1);
}

.UserListInfoBoxs {
  margin: 0 23px;
  h3 {
    font-size: 15px;
    font-weight: 600;
    font-family: PingFangSC-Medium, PingFangSC-Regular, sans-serif;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    font-weight: 600;
  }
}
.UserListInfoBox_row_col {
  .UserListInfoBox_row_col_title {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 24px;
  }
  .UserListInfoBox_row_col_text {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 24px;
  }
}
.UserListInfoBox_cancel_box {
  margin-top: 50px;
  margin-bottom: 10px;
  height: 40px;
  text-align: right;
}
.UserListInfoBox_cancel {
  background: #d9d9d9;
}
.UserListSetBox_tab {
  h3 {
    font-size: 15px;
    font-weight: 700;
    color: rgba(17, 17, 17, 1);
    line-height: 24px;
    margin: 15px 0;
  }
  .createForm1_h3 {
    margin-top: 15px;
  }
  .UserListSetBox_tab_title {
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 24px;
  }
}
.UserListSetBox {
  .ant-modal-body {
    padding: 5px 60px 20px 60px;
  }
}
</style>
